<!-- <template>
	<image :src="validSrc" mode="aspectFill" @error="onError" lazy-load=true />
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';

const props = defineProps<{ src: string }>();
const defaultImg = `/static/radios/${Math.floor(Math.random() * 10) + 1}.jpg`;
// const defaultImg = `/static/dog.gif`;
const validSrc = ref(props.src || defaultImg);

const onError = () => {
	validSrc.value = defaultImg;
};

watchEffect(() => {
	validSrc.value = props.src || defaultImg;
});
</script> -->
<template>
	<view :class="[$attrs.class]" style="position: relative;">
		<!-- 加载中浮层 -->
		<view v-if="isLoading" class="loading-spinner">
			<view class="spinner-circle"></view>
		</view>

		<!-- 图片本体 -->
		<image :src="validSrc" mode="aspectFill" @load="onLoad" @error="onError" style="width: 100%; height: 100%; border-radius: 16rpx;" lazy-load />
	</view>
</template>

<script setup lang="ts">
	import { ref, watchEffect } from 'vue'

	const props = defineProps<{ src ?: string }>()
	const isLoading = ref(true)
	const defaultImg = `/static/radios/${Math.floor(Math.random() * 10) + 1}.jpg`
	const validSrc = ref(props.src || defaultImg)

	const onLoad = () => {
		isLoading.value = false
	}
	const onError = () => {
		isLoading.value = false
		validSrc.value = defaultImg
	}

	watchEffect(() => {
		validSrc.value = props.src || defaultImg
	})
</script>
<style lang="css" scoped>
	.loading-spinner {
		position: absolute;
		top: 0;
		left: 0;
		/* right: 0;
		bottom: 0; */
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 10;
	}

	.spinner-circle {
		/* width: 80rpx;
		height: 80rpx; */
		width: 50%;
		padding-top: 50%;
		border: 5rpx solid rgba(255, 255, 255, 0.2);
		border-top-color: #ff55ff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>